<!-- 学术帖发布页 -->
<!-- 小瓜子 更新于 2020/08/23 -->

<!-- 小瓜子 更新于 2020/08/25 -->
<!-- 
	1.增加底部选择框
	2.增加标签选择弹窗组件 
-->

<!-- 小瓜子 更新于 2020/08/26 -->
<!-- 
	 完成三个弹框的基本样式布局，以及标签选择弹框的逻辑处理
-->

<!-- 小瓜子 更新于 2020/08/28 -->
<!-- 
	 1.完成添加标题确认弹框
	 2.完成请求粉丝和关注的列表
	 3.完成请求圈子的列表
 -->

<!-- 小瓜子 更新于2020/08/29 -->
<!-- 1.完成图片上传接口
	 2.完成文章上传接口 -->

<!-- 小瓜子 更新于2020/08/31 -->
<!-- 1.完成编辑保存和读取功能
	 2.将导航栏改为自定义导航栏 -->

<!-- 小瓜子 更新于 2020/09/02 -->
<!-- 重写页面逻辑 -->

<!-- 小瓜子 更新于 2020/09/05 -->
<!-- 修复工具栏被顶起的bug -->

<!-- 小瓜子 更新于 2020/09/06 -->
<!-- 1.更改图标按钮样式
	 2.增加组件传值token，方便上传封面图 -->

<!-- 小瓜子 更新于 2020/09/08 -->
<!-- 1.至少添加文字和图片的其中一个 -->
<template>
	<view class="academic_edit">
		<!-- 用来将页面整体向下顶，给屏幕状态栏留出空间 -->
		<view class="status_bar"></view>
		<!-- 自定义导航栏 -->
		<view class="nav_bar">
			<view class="aside" @tap="back">
				<text class="cancel">取消</text>
			</view>
			<view class="message">编辑文章</view>
		</view>
		<view class="all">
			<!-- 工具栏 -->
			<view class='toolbar' @tap="format">
				<view class="row">
					<!-- 撤销 -->
					<view class="iconfont icon-undo" @tap="undo"></view>
					<!-- 重做 -->
					<view class="iconfont icon-redo" @tap="redo"></view>
					<!-- 插入图片 -->
					<view class="iconfont icon-charutupian" @tap="insertImage"></view>
					<!-- 字体加粗 -->
					<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
					<!-- 改变字体大小 -->
					<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize"
					data-value="24px"></view>
					<!-- 改变字体颜色 不想要这个功能 -->
					<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color"
					data-value="#0000ff"></view>
					<!-- 字体倾斜 -->
					<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
					<!-- 下划线 -->
					<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
					<!-- 删除线 -->
					<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view>
				</view>
				
				<view class="row">
					<!-- 左对齐 -->
					<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align"
					data-value="left"></view>
					<!-- 居中对齐 -->
					<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align"
					data-value="center"></view>
					<!-- 右对齐 -->
					<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align"
					data-value="right"></view>
					<!-- 两端对齐 -->
					<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align"
					data-value="justify"></view>
					<!-- 一级标题 -->
					<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header"
					:data-value="1"></view>
					<!-- 二级标题 -->
					<view :class="formats.header === 2 ? 'ql-active' : ''" class="iconfont icon-format-header-2" data-name="header"
					:data-value="2"></view>
					<!-- 三级标题 -->
					<view :class="formats.header === 3 ? 'ql-active' : ''" class="iconfont icon-format-header-3" data-name="header"
					:data-value="3"></view>
					<!-- 四级标题 -->
					<view :class="formats.header === 4 ? 'ql-active' : ''" class="iconfont icon-format-header-4" data-name="header"
					:data-value="4"></view>
					<!-- 五级标题 -->
					<view :class="formats.header === 5 ? 'ql-active' : ''" class="iconfont icon-format-header-5" data-name="header"
					:data-value="5"></view>
				</view>
				<view class="row">
					<!-- 清空全部 -->
					<view class="iconfont icon-shanchu" @tap="clear"></view>
					<!-- 插入checkbox -->
					<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
					<!-- 插入有序列表 -->
					<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list"
					 data-value="ordered"></view>
					<!-- 插入无序列表 -->
					<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list"
					data-value="bullet"></view>
					<!-- 插入分割线 -->
					<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
					<!-- 下标 -->
					<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script"
					 data-value="sub"></view>
					<!-- 上标 -->
					<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script"
					data-value="super"></view>
					<!-- 减小缩进 -->
					<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
					<!-- 增加缩进 -->
					<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
				</view>
			</view>
			<!-- 占空盒子 -->
			<!-- <view class="top_block"></view> -->
			<!-- 文本编辑框 -->
			<scroll-view 
				scroll-y="true" 
				:style="'height:'+ editorHeight +'px;'">
				<editor 
					id="editor" 
					class="ql-container uni-input"
					:style="'min-height:'+ editorHeight +'px;'"
					placeholder="开始输入..." 
					showImgSize 
					showImgToolbar 
					showImgResize
					@statuschange="onStatusChange" 
					@ready="onEditorReady"
					:read-only="readOnly">
				</editor>
			</scroll-view>
		</view>
		<!-- 底部弹框 -->
		<!-- 2020/08/26 -->
		<!-- 完成弹框 -->
		<view class="popup-content">
			<!-- 艾特弹框 -->
			<uni-popup ref="popup_sl_at" type="bottom" :maskClick='false' v-if='!fromcommunity'>
				<uni-popup-sl-at 
					:userFans='userFans' 
					:userStar='userStar' 
					:pNomore='pNomore'
					:screenHeight='screenHeight'
					:screenWidth='screenWidth'>
				</uni-popup-sl-at>
			</uni-popup>
			<!-- 选择标签弹框 -->
			<uni-popup ref="popup_sl_tag" type="bottom" :maskClick='false' v-if='!fromcommunity'>
				<uni-popup-sl-tag 
					:tags='tags' 
					:myTag='myTag' 
					:screenHeight='screenHeight'
					:screenWidth='screenWidth'
					@refreshTags='refreshTags'>
				</uni-popup-sl-tag>
			</uni-popup>
			<!-- 同步到圈子弹框 -->
			<uni-popup ref="popup_sl_community" type="bottom" :maskClick='false' v-if='!fromcommunity'>
				<uni-popup-sl-community 
					:screenHeight='screenHeight'
					:screenWidth='screenWidth'
					:userCommunity='userCommunity'
					:cNomore='cNomore'>
				</uni-popup-sl-community>
			</uni-popup>
			<!-- 提交弹窗 -->
			<uni-popup ref="popup_add_title" type="bottom" :maskClick='true'>
				<!-- 传值说明：
					 atPeopleList: 被@的用户信息; myTag: 自定义标签; mainTags: 主标签; selectedCommunity: 被选中的圈子信息
					 communityId: 从圈子跳转到本页时带的参数; articleBody: 富文本内容-->
				<uni-popup-add-title 
					:submitForm='submitForm'
					:communityId='communityId'
					:token='token'
					:screenHeight='screenHeight' 
					:screenWidth='screenWidth'>
				</uni-popup-add-title>
			</uni-popup>
		</view>
		<!-- 提交按钮 -->
		<button type="default" v-show="showBtn" class="submit_button" @tap="addTitle">下一步</button>
		<!-- 底栏 -->
		<view class="bottombar" v-show="showBtn" v-if='!fromcommunity'>
			<text class="inxupt" @tap='atPeople'>@</text>
			<text class="inxupt" @tap='addTag'>#</text>
			<text class="inxupt inxupttubiao15" @tap='addCommunity'></text>
		</view>
	</view>
</template>

<script>
	import UniPopupAddTitle from "../../components/plugins/uni-popup/uni-popup-addTitle.vue"
	import UniPopupSlAt from "../../components/plugins/uni-popup/uni-popup-slAt.vue"
	import UniPopupSlTag from "../../components/plugins/uni-popup/uni-popup-slTag.vue"
	import UniPopupSlCommunity from "../../components/plugins/uni-popup/uni-popup-slCommunity.vue"
	import UniPopup from "../../components/plugins/uni-popup/uni-popup.vue"
	
	import { _ajax } from "../../in-xupt-functions.js"
	import BaseUrl from "../../config.js"
	
	export default {
		components: {
			UniPopupAddTitle,
			UniPopupSlCommunity,
			UniPopupSlTag,
			UniPopupSlAt,
			UniPopup
		},
		data() {
			return {
				communityId: undefined, // 如果是从圈子页面进来的会有这个值
				fromcommunity: false,
				screenHeight: 0,
				screenWidth: 0,
				readOnly: false,
				formats: {},
				editorHeight: 0,
				// 标签数据
				tags: [
					{
						tagName: '学习',
						selected: false,
						id: 1
					},
					{
						tagName: '生活',
						selected: false,
						id: 2
					},
					{
						tagName: '失物招领',
						selected: false,
						id: 3
					},
					{
						tagName: '分享感悟',
						selected: false,
						id: 4
					},
					{
						tagName: '表白',
						selec5ted: false,
						id: 5
					},
					{
						tagName: '找人',
						selected: false,
						id: 6
					},
					{
						tagName: '寻物启事',
						selected: false,
						id: 7
					},
					{
						tagName: '求购',
						selected: false,
						id: 8
					},
					{
						tagName: '出售',
						selected: false,
						id: 9
					},
					{
						tagName: '拼团',
						selected: false,
						id: 10
					},
					{
						tagName: '考研',
						selected: false,
						id: 11
					},
					{
						tagName: '活动宣传',
						selected: false,
						id: 12
					},
					{
						tagName: '纳新',
						selected: false,
						id: 12
					},
					{
						tagName: '找队友',
						selected: false,
						id: 14
					},
					{
						tagName: '编程',
						selected: false,
						id: 15
					},
					{
						tagName: '二次元',
						selected: false,
						id: 16
					},
					{
						tagName: '美食',
						selected: false,
						id: 17
					},
					{
						tagName: '美妆',
						selected: false,
						id: 18
					},
					{
						tagName: '新闻',
						selected: false,
						id: 19
					},
					{
						tagName: '周边',
						selected: false,
						id: 20
					},
					{
						tagName: '其他',
						selected: false,
						id: 21
					}
				],
				userStar: [], // 用户的关注列表
				userFans: [], // 用户的粉丝列表
				userCommunity: [], // 用户的圈子列表
				mainTags: [], // 被选择的主标签 maintags
				myTag: '', // 用户自定义标签 customTags
				articleBody: '' ,// body
				pureText: '',
				pNomore: false,
				cNomore: false,
				showBtn: true,
				sl_community_show: false,
				sl_at_show: false,
				sl_tag_show: false,
				add_title_show: false,
				haveImg: false // 判断有没有图片
			}
		},
		computed: {
			submitForm: function() {
				return {
					atPeopleList: this.atPeopleList,
					myTag: this.myTag,
					mainTags: this.mainTags,
					selectedCommunity: this.selectedCommunity,
					communityId: this.communityId,
					articleBody: this.articleBody,
					pureText: this.pureText
				}
			},
			// 被艾特的用户信息(第0项为id,第1项为用户名)
			atPeopleList: function() {
				let IdArr = [];
				let NameArr = [];
				let arr = [...this.userFans,...this.userStar];
				arr.forEach(item => {
					if(item.selected) {
						IdArr.push(item.id)
						NameArr.push(item.nickName)
					}
				})
				// 数组去重
				IdArr = IdArr.filter((item,index,arr) => {
					return arr.indexOf(item, 0) === index;
				})
				NameArr = NameArr.filter((item,index,arr) => {
					return arr.indexOf(item, 0) === index;
				})
				// 当被@的人数达到5个时，向组件传值说明人数已达上限
				if(IdArr.length >= 5) {
					this.pNomore = true
				}else {
					this.pNomore = false
				}
				return [IdArr,NameArr]
			},
			// 要同步的圈子信息(第0项为id,第1项为圈子名)
			selectedCommunity: function() {
				let IdArr = [];
				let NameArr = [];
				this.userCommunity.forEach(item => {
					if(item.selected) {
						IdArr.push(item.id)
						NameArr.push(item.name)
					}
				})
				// 数组去重
				IdArr = IdArr.filter((item,index,arr) => {
					return arr.indexOf(item, 0) === index;
				})
				NameArr = NameArr.filter((item,index,arr) => {
					return arr.indexOf(item, 0) === index;
				})
				if(IdArr.length >= 5) {
					this.cNomore = true
				}else {
					this.cNomore = false
				}
				return [IdArr,NameArr]
			}
		},
		methods: {
		// -------------------富文本输入框相关方法----------------- // 
			// 当工具栏被点击时
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			// 当editor准备好可以开始编辑
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			// 更改输入样式
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				this.editorCtx.format(name, value)
			},
			// 清除所有样式
			removeFormat() {
				this.editorCtx.removeFormat()
			},
			// 清空所有内容
			clear() {
				this.editorCtx.clear({
					success: function(res) {
					}
				})
			},
			// 撤销
			undo() {
				this.editorCtx.undo()
			},
			// 重做
			redo() {
				this.editorCtx.redo()
			},
			// 插入分割线
			insertDivider() {
				this.editorCtx.insertDivider()
			},
			// 插入日期
			insertDate() {
				const date = new Date()
				const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
				this.editorCtx.insertText({
					text: formatDate
				})
			},
			// 插入图片函数
			// 完成图片上传接口对接
			insertImage() {
				let _this = this
				// 选择图片
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.showLoading({
							title:'正在上传图片...',
							mask: true
						})
						// 上传图片
						uni.uploadFile({
							url: BaseUrl + '/upload',
							header: {
								'token': this.token,
							},
							name: 'file',
							filePath: res.tempFilePaths[0],
							success: function(res) {
								// 解析传回的数据
								let resData = JSON.parse(res.data)
								if (resData.status == 0) {
									// 将返回的地址写富文本（插入图片）
									_this.editorCtx.insertImage({
										src: resData.data,
										alt: '图像',
										success: () => {
											_this.editorCtx.getContents({
												success: (res) => {
													_this.haveImg = true
												}
											})
											_this.editorCtx.insertText({
												text: '\n'
											})
											uni.hideLoading()
										},
										fail: () => {
											// 插入失败显示
											uni.showToast({
												icon: 'none',
												title: '图片插入失败，请重试'
											})
										}
									})
								}else {
									uni.showToast({
										title: resData.msg,
										icon: 'none'
									})
								}
								
							}
						})
					}
				})
			},
		// ------------------------------------------------------- //
		
		// --------------------底部栏相关方法---------------------- //
			// 点击@用户
			atPeople() {
				if(this.userFans.length == 0) {
					uni.showLoading({
						title: '正在加载...'
					})
					_ajax({
						url: '/user/' + this.userId + '/follows?pageSize=1000',
						method: 'GET',
					})
					.then(res => {
						if(res.data.status == 0) {
							this.userStar = res.data.data.list;
						}else {
							uni.showToast({
								title:res.data.msg
							})
						}
						return _ajax({
								url: '/user/' + this.userId + '/fans?pageSize=1000',
								method: 'GET',
							})
					})
					.then(res => {
						if(res.data.status == 0) {
							this.userFans = res.data.data.list
							uni.hideLoading()
							return 
						}else {
							uni.showToast({
								title: res.data.msg
							})
						}
						
					})
				}
				this.$refs.popup_sl_at.open()
				this.sl_at_show = true;
			},
			// 点击添加tag
			addTag() {
				this.$refs.popup_sl_tag.open()
				this.sl_tag_show = true;
			},
			// 点击同步到圈子
			addCommunity() {
				if(this.userCommunity.length == 0) {
					uni.showLoading({
						title: '正在加载...'
					})
					_ajax({
							url: '/user/' + this.userId + '/circles',
							method: 'GET',
						})
						.then(res => {
							if(res.data.status == 0) {
								this.userCommunity = res.data.data
								uni.hideLoading()
							}else {
								uni.showToast({
									title: res.data.msg
								})
								return
							}
							
						})
				}
				this.$refs.popup_sl_community.open()
				this.sl_community_show = true
			},
			// 点击下一步
			addTitle() {
				this.editorCtx.getContents({
					success: (res) => {
						// 正则匹配空文本，如果全都是空白字符或者没有图片，则不能发表
						if(/^\s*$/.test(res.text)  && !this.haveImg) {
							uni.showToast({
								icon:'none',
								title: '不能发表空白文本'
							})
							return
						}else if(this.mainTags == false && !this.communityId) {
							uni.showToast({
								title: '请选择至少一个主标签',
								icon:'none'
							})
							return
						}
						this.editorCtx.getContents({
							success: (res) => {
								this.articleBody = res.html
								this.pureText = res.text
							}
						})
						this.$refs.popup_add_title.open()
					}
				})
				
			},
			// 点击取消返回时
			back: function () {
				this.editorCtx.getContents({
					success: (res) => {
						// 判断有没有输入内容，没有输入内容则直接退出
						if(/^\s*$/.test(res.text)) {
							uni.navigateBack({
								delta:1,
								animationType: 'slide-out-right'
							})
						} else {
							let contentData = res
							// 有输入内容，则判断是在圈子页面还是在新鲜事页面
							if(this.communityId){
								// 圈子页面提示
								uni.showModal({
									title: '保存',
									content: '保存时会覆盖其他圈子的编辑记录，是否保存？',
									confirmText: '保存并退出',
									cancelText: '直接退出',
									success: (res) => {
										if(res.confirm) {
											this.saveHistory('C_AEHistory',contentData)
										}
										if(res.cancel) {
											uni.navigateBack({
												delta:1,
												animationType: 'slide-out-right'
											})
										}
									}
								})
							}else {
								// 新鲜事页面提示
								uni.showModal({
									title: '保存',
									content: '是否保存？',
									confirmText: '保存并退出',
									cancelText: '直接退出',
									success: (res) => {
										if(res.confirm) {
											this.saveHistory('N_AEHistory',contentData)
										}
										if(res.cancel) {
											// uni.removeStorageSync('N_AEHistory')
											uni.navigateBack({
												delta:1,
												animationType: 'slide-out-right'
											})
										}
									}
								})
							}
						}
					}
				})
				
			},
		// ------------------------------------------------------- //
		
		// --------------------保存和取出数据---------------------- //
			// 保存数据
			saveHistory(key,data) {
				uni.setStorage({
					key: key,
					data: data,
					success: () => {
						uni.navigateBack({
							delta:1,
							animationType: 'slide-out-right'
						})
					}
				})
			},
			// 取出保存数据
			getHistory(key) {
				let content = uni.getStorageSync(key)
				if(content) {
					uni.showModal({
						content: '检测到你有未完成的编辑记录,要继续编辑嘛？',
						confirmText: '继续编辑',
						cancelText: '不了，谢谢',
						success: (res) => {
							if(res.confirm) {
								this.editorCtx.setContents(content);
							}
							if(res.cancel) {
								uni.removeStorageSync(key)
							}
						}
					})
				}
			},
		// ------------------------------------------------------- //
		
		// ----------------------弹出层方法------------------------ //
			// 接收标签选择弹框的值
			refreshTags(res) {
				this.mainTags = res.mainTags;
				this.myTag = res.myTag;
			}
		// ------------------------------------------------------- //
			
		},
		onLoad:function(option){
			let _this = this
			_this.token = uni.getStorageSync('token');
			_this.userId = uni.getStorageSync('userId');
			if(option.communityId) {
				_this.fromcommunity = true;
				_this.communityId = option.communityId;
				if(_this.getHistory('C_AEHistory')) {
					
				}
				_this.getHistory('C_AEHistory')
			}
			uni.getSystemInfo({
				success: function(res) {
					_this.screenHeight = res.screenHeight
					_this.screenWidth = res.screenWidth
					_this.editorHeight = _this.screenHeight * 0.3
				}
			})
			uni.onKeyboardHeightChange(function(res){
				if(res.height == 0) {
					_this.showBtn = true
				}else {
					_this.showBtn = false
				}
			})
		},
		// 当页面被显示时，重新计算屏幕高度
		onShow: function () {
			
		},
		// 当所有节点挂载完成之后，读取历史编辑记录
		onReady:function(){
			if(this.communityId) {
				this.getHistory('C_AEHistory');
			}else {
				this.getHistory('N_AEHistory');
			}
		},
		// 当返回键被点击时，如果是系统返回键，且有弹窗打开，则关闭弹窗
		onBackPress:function(options){
			if(options.from == 'backbutton' && (this.sl_at_show || this.sl_tag_show || this.sl_community_show || this.add_title_show)) {
				if (this.sl_at_show) {
					this.$refs.popup_sl_at.close()
				}
				if (this.sl_tag_show) {
					this.$refs.popup_sl_tag.close()
				}
				if (this.sl_community_show) {
					this.$refs.popup_sl_community.close()
				}
				if (this.add_title_show) {
					this.$refs.popup_add_title.close()
				}
				return true
			}else if(options.from == 'backbutton'){
				this.back();
				return true
			}
		}
	}
</script>

<style lang="less">
	@import "./editor-icon.css";
	@statusHeight: var(--status-bar-height);
	.status_bar {
		height: @statusHeight;
		width: 100%;
		background-color: #FFFFFF;
		top: 0rpx;
		z-index: 2;
	}
	.nav_bar {
		position: relative;
		height: 50px;
		width: 100%;
		color: #000000;
		z-index: 2;
		background-color: #FFFFFF;
		.aside {
			position: absolute;
			left: 0rpx;
			width: 75px;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			text {
				display: inline-block;
				width: 90%;
				height: 70%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.cancel {
				color: #7f7f7f;
			}
		}
		.message {
			font-size: 14px;
			height: 100%;
			width: 100%;
			line-height: 50px;
			text-align: center;
			justify-self: center;
		}
	}
	.academic_edit {
		.all {
			width: 100%;
			position: fixed;
			top: calc(@statusHeight + 50px);
			.toolbar {
				width: 100%;
				box-sizing: border-box;
				font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
				z-index: 2;
				background-color: #FFFFFF;
				margin-bottom: 10px;
				.row {
					width: 100%;
					display: flex;
					justify-content: space-around;
					flex-wrap: wrap;
					.iconfont,
					.inxupt {
						color: #999;
						display: inline-block;
						padding: 16rpx 0;
						width: 24px;
						height: 24px;
						cursor: pointer;
						font-size: 20px;
					}
					.ql-active {
						// color: #000000;
						color: @g-pink;
					}
					.inxupttubiao30::before {
						position: absolute;
						right: 8px;
						bottom: 8px;
						color: #999;
						font-size: 20px;
						background-color: #FFFFFF;
					}
				}
			}
			scroll-view {
				.ql-container {
					padding: 24rpx 30rpx;
					width: 100%;
					// min-height: 250px;
					height: auto;
					background: #fff;
					font-size: 16px;
					line-height: 1.5rem;
				}
			}
		}
		.submit_button {
			position: absolute;
			bottom: 80px;
			left: 20%;
			width: 450rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 16px;
			color: #FFFFFF;
			border-radius: 10rpx;
			background-color: @g-pink;
		}
		.bottombar {
			background-color: white;
			position: absolute;
			width: 100%;
			bottom: 0px;
			box-shadow: 0 0 5px 0 #cfcfcf;
			.inxupt {
				display: inline-block;
				padding: 10px;
				font-size: 24px;
				color: #D2D2D2;
			}
		}
	}
</style>